<template>
    <a-drawer
        title="Hms Info"
        placement="right"
        v-model:visible="sVisible"
        @update:visible="onVisibleChange"
        :destroyOnClose="true"
        :width="800">
        <div class="flex-row flex-align-center">
            <div style="width: 240px;">
                <a-range-picker
                    v-model:value="time"
                    format="YYYY-MM-DD"
                    :placeholder="['Start Time', 'End Time']"
                    @change="onTimeChange" />
            </div>
            <div class="ml5">
                <a-select
                    style="width: 150px"
                    v-model:value="param.level"
                    @select="onLevelSelect">
                    <a-select-option
                        v-for="item in levels"
                        :key="item.label"
                        :value="item.value"
                    >
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="ml5">
                <a-select
                    v-model:value="param.domain"
                    :disabled="!param.children_sn || !param.device_sn"
                    style="width: 150px"
                    @select="onDeviceTypeSelect">
                    <a-select-option
                        v-for="item in deviceTypes"
                        :key="item.label"
                        :value="item.value"
                    >
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="ml5">
                <a-input-search
                    v-model:value="param.message"
                    placeholder="input search message"
                    style="width: 200px"
                    @search="getHms" />
            </div>
        </div>
        <div>
            <a-table :columns="hmsColumns" :scroll="{ x: '100%', y: 600 }" :data-source="hmsData.data"
                     :pagination="hmsPaginationProp" @change="refreshHmsData" row-key="hms_id"
                     :rowClassName="rowClassName" :loading="loading">
                <template #time="{ record }">
                    <div>{{ record.create_time }}</div>
                    <div :style="record.update_time ? '' : record.level === EHmsLevel.CAUTION ? 'color: orange;' :
            record.level === EHmsLevel.WARN ? 'color: red;' : 'color: #28d445;'">
                        {{ record.update_time ?? 'It is happening...' }}
                    </div>
                </template>
                <template #level="{ text }">
                    <div class="flex-row flex-align-center">
                        <div
                            :class="text === EHmsLevel.CAUTION ? 'caution' : text === EHmsLevel.WARN ? 'warn' : 'notice'"
                            style="width: 10px; height: 10px; border-radius: 50%;"></div>
                        <div style="margin-left: 3px;">{{ EHmsLevel[text] }}</div>
                    </div>
                </template>
                <template v-for="col in ['code', 'message']" #[col]="{ text }" :key="col">
                    <a-tooltip :title="text">
                        <div>{{ text }}</div>
                    </a-tooltip>
                </template>
                <template #domain="{text}">
                    <a-tooltip :title="EDeviceTypeName[text]">
                        <div>{{ EDeviceTypeName[text] }}</div>
                    </a-tooltip>
                </template>
            </a-table>
        </div>
    </a-drawer>
</template>

<!-- 暂时只抽取该组件 -->
<script lang="ts" setup>
import { reactive, ref, defineEmits, watch } from 'vue'
import { getDeviceHms, HmsQueryBody } from '/@/api/manage'
import moment, { Moment } from 'moment'
import { ColumnProps, TableState } from 'ant-design-vue/lib/table/interface'
import { Device, DeviceHms } from '/@/types/device'
import { IPage } from '/@/api/http/type'
import { EDeviceTypeName, EHmsLevel, ELocalStorageKey } from '/@/types'

const props = defineProps<{
    visible: boolean,
    device: null | Device,
}>()
const emit = defineEmits(['update:visible', 'ok', 'cancel'])

const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || ''
// 健康状态
const sVisible = ref(false)

watch(props, () => {
    sVisible.value = props.visible
    // 显示弹框时，获取设备hms信息
    if (props.visible) {
        showHms()
    }
})

function onVisibleChange(sVisible: boolean) {
    setVisible(sVisible)
}

function setVisible(v: boolean, e?: Event) {
    sVisible.value = v
    emit('update:visible', v, e)
}

const loading = ref(false)

const hmsColumns: ColumnProps[] = [
    {
        title: 'Alarm Begin | End Time',
        dataIndex: 'create_time',
        width: '25%',
        className: 'titleStyle',
        slots: { customRender: 'time' }
    },
    { title: 'Level', dataIndex: 'level', width: '120px', className: 'titleStyle', slots: { customRender: 'level' } },
    { title: 'Device', dataIndex: 'domain', width: '12%', className: 'titleStyle', slots: { customRender: 'domain' } },
    {
        title: 'Error Code',
        dataIndex: 'key',
        width: '20%',
        className: 'titleStyle',
        ellipsis: true,
        slots: { customRender: 'code' }
    },
    {
        title: 'Hms Message',
        dataIndex: 'message_en',
        className: 'titleStyle',
        ellipsis: true,
        slots: { customRender: 'message' }
    },
    {
        title: 'Hms Message',
        dataIndex: 'message_zh',
        className: 'titleStyle',
        ellipsis: true,
        slots: { customRender: 'message' }
    },
]

interface DeviceHmsData {
    data: DeviceHms[]
}

const hmsData = reactive<DeviceHmsData>({
    data: []
})

type Pagination = TableState['pagination']

const hmsPaginationProp = reactive({
    pageSizeOptions: ['20', '50', '100'],
    showQuickJumper: true,
    showSizeChanger: true,
    pageSize: 50,
    current: 1,
    total: 0
})

// 获取分页信息
function getPaginationBody() {
    return {
        page: hmsPaginationProp.current,
        page_size: hmsPaginationProp.pageSize
    } as IPage
}

function showHms() {
    const dock = props.device
    if (!dock) return
    if (dock.domain === EDeviceTypeName.Dock) {
        getDeviceHmsBySn(dock.device_sn, dock.children?.[0].device_sn ?? '')
    }
    if (dock.domain === EDeviceTypeName.Aircraft) {
        param.domain = EDeviceTypeName.Aircraft
        getDeviceHmsBySn('', dock.device_sn)
    }
}

function refreshHmsData(page: Pagination) {
    hmsPaginationProp.current = page?.current!
    hmsPaginationProp.pageSize = page?.pageSize!
    getHms()
}

const param = reactive<HmsQueryBody>({
    sns: [],
    device_sn: '',
    children_sn: '',
    language: 'en',
    begin_time: new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0),
    end_time: new Date().setHours(23, 59, 59, 999),
    domain: -1,
    level: '',
    message: ''
})

const levels = [
    {
        label: 'All',
        value: ''
    }, {
        label: EHmsLevel[0],
        value: EHmsLevel.NOTICE
    }, {
        label: EHmsLevel[1],
        value: EHmsLevel.CAUTION
    }, {
        label: EHmsLevel[2],
        value: EHmsLevel.WARN
    }
]

const deviceTypes = [
    {
        label: 'All',
        value: -1
    }, {
        label: EDeviceTypeName[EDeviceTypeName.Aircraft],
        value: EDeviceTypeName.Aircraft
    }, {
        label: EDeviceTypeName[EDeviceTypeName.Dock],
        value: EDeviceTypeName.Dock
    }
]

const rowClassName = (record: any, index: number) => {
    const className = []
    if ((index & 1) === 0) {
        className.push('table-striped')
    }
    if (record.domain !== EDeviceTypeName.Dock) {
        className.push('child-row')
    }
    return className.toString().replaceAll(',', ' ')
}

const time = ref([moment(param.begin_time), moment(param.end_time)])

function getHms() {
    loading.value = true
    getDeviceHms(param, workspaceId, getPaginationBody())
        .then(res => {
            hmsPaginationProp.total = res.data.pagination.total
            hmsPaginationProp.current = res.data.pagination.page
            hmsData.data = res.data.list
            hmsData.data.forEach(hms => {
                hms.domain = hms.sn === param.children_sn ? EDeviceTypeName.Aircraft : EDeviceTypeName.Dock
            })
            loading.value = false
        }).catch(_err => {
        loading.value = false
    })
}

function getDeviceHmsBySn(sn: string, childSn: string) {
    param.device_sn = sn
    param.children_sn = childSn
    param.sns = [param.device_sn, param.children_sn]
    getHms()
}

function onTimeChange(newTime: [Moment, Moment]) {
    param.begin_time = newTime[0].valueOf()
    param.end_time = newTime[1].valueOf()
    getHms()
}

function onDeviceTypeSelect(val: number) {
    param.sns = [param.device_sn, param.children_sn]
    if (val === EDeviceTypeName.Dock) {
        param.sns = [param.device_sn, '']
    }
    if (val === EDeviceTypeName.Aircraft) {
        param.sns = ['', param.children_sn]
    }
    getHms()
}

function onLevelSelect(val: number) {
    param.level = val
    getHms()
}
</script>
